<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title th:text="${title}"></title>

<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>
<script src="/vue/vue.min.js"></script>

<style>
.layui-form-item {
	margin-bottom: 3px;
}
</style>
</head>


<body id="app">
	<div style="padding: 10px;" class="layui-form layui-form-pane" action="">
		
		<div class="layui-form-item">
			<label class="layui-form-label">图书编号</label>
			<div class="layui-input-block">
				<input type="text"  v-model="bianhao" th:value="${book?.bianhao}"  autocomplete="off"
					placeholder="请输入 图书编号" class="layui-input">
			</div>
		</div>
		
		
		<div class="layui-form-item">
			<label class="layui-form-label">图书名称</label>
			<div class="layui-input-block">
				<input type="text"  v-model="name" th:value="${book?.name}"  autocomplete="off"
					placeholder="请输入  图书名称" class="layui-input">
			</div>
		</div>
		
		 <div class="layui-form-item">
		    <label class="layui-form-label">图书类型</label>
		    <div class="layui-input-block">
		      <select id="bookTypeId"  >
		        <option th:value="${bookType.id}"  th:text="${bookType.name}"  th:each="bookType: ${bookTypeList}"></option>
		      </select>
		    </div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">作者</label>
			<div class="layui-input-block">
				<input type="text"  v-model="author" th:value="${book?.author}"  autocomplete="off"
					placeholder="请输入  作者" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">单价</label>
			<div class="layui-input-block">
				<input type="text"  v-model="danjia" th:value="${book?.danjia}"  autocomplete="off"
					placeholder="请输入  单价" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出版社</label>
			<div class="layui-input-block">
				<input type="text"  v-model="press" th:value="${book?.press}"  autocomplete="off"
					placeholder="请输入  出版社" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">数量</label>
			<div class="layui-input-block">
				<input type="text"  v-model="num" th:value="${book?.num}"  autocomplete="off"
					placeholder="请输入  数量" class="layui-input">
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">排序号</label>
			<div class="layui-input-block">
				<input type="text"  v-model="orderNo" th:value="${book?.orderNo}"  autocomplete="off"
					placeholder="请输入  排序号" class="layui-input">
			</div>
		</div>
		
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" th:text="${btn_text}"  lay-submit="" lay-filter="demo1"
					onclick="save()"></button>
			</div>
		</div>
		
	</div>
	
</body>

<script th:inline="none">
	layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload',
			'element' ], function() {
		var laydate = layui.laydate //日期
		, laypage = layui.laypage //分页
		, layer = layui.layer //弹层
		, table = layui.table //表格
		, carousel = layui.carousel //轮播
		, upload = layui.upload //上传
		, element = layui.element; //元素操作
		
	});
</script>
<script  th:inline="javascript">
/*<![CDATA[*/
$(function(){
	if("[[${book?.bookTypeId}]]"!="null"){
		$("#bookTypeId").val([[${book?.bookTypeId}]]);
	}
});


	var save_url = [[${save_url}]];
	function save() {
		var index = layer.msg('提交中，请稍候', {
			icon : 16,
			time : false,
			shade : 0.8
		});
		var bookTypeId = $("#bookTypeId").val();
		
		$.post(save_url, {bianhao:app.bianhao,name:app.name,danjia:app.danjia,author:app.author,press:app.press,orderNo:app.orderNo,'bookType.id':bookTypeId
			,num:app.num
		}, function(result) {
			if (result.success) {
				window.parent.closeDlg(result.msg);
				parent.layui.table.reload('table',{page: {curr: 1}});//刷新父窗口数据
			} else {
				layer.msg(result.msg);
			}
		}, 'json');
	}
	
/*]]>*/
</script>
<script>
	var app = new Vue({
		el : '#app',
		data : {
		}
	});
</script>
</html>